<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <meta name="description" content="">
        <meta name="author" content="">

        <title>Tween Digital Agency HTML Template</title>

        <!-- CSS FILES -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        
        <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,300;0,400;0,600;1,300&display=swap" rel="stylesheet">
                
        <link href="css/bootstrap.min.css" rel="stylesheet">

        <link href="css/bootstrap-icons.css" rel="stylesheet">

        <link href="css/magnific-popup.css" rel="stylesheet">

        <link href="css/tooplate-tween-agency.css" rel="stylesheet">

<!--

Tooplate 2128 Tween Agency

https://www.tooplate.com/view/2128-tween-agency

-->

    </head>
    
    <body>

        <nav class="navbar fixed-top navbar-expand-lg">
            <div class="container">

                <a href="index.html" class="navbar-brand">
                    <i class="bi-layers"></i> Tween
                </a>

                <a href="#" class="custom-btn btn btn-lg d-lg-none ms-auto me-4">
                    Download
                    <i class="bi-download ms-2"></i>
                </a>

                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ms-lg-5">
                        <li class="nav-item">
                            <a class="nav-link" href="#section_1">Home</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#section_2">About</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#section_3">Services</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#section_4">Our Work</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#section_5">Pricing</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#section_6">Contact</a>
                        </li>
                    </ul>

                    <div class="ms-auto d-none d-lg-block">
                        <a href="#" class="custom-btn btn btn-lg">
                            Download
                            <i class="bi-download ms-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <main>

            <section class="hero d-flex justify-content-center align-items-center" id="section_1">
                <div class="container">
                    <div class="row">

                        <div class="col-lg-8 col-12">
                            <div class="heroText">
                                <h1 class="text-white mb-lg-5 mb-4">We are ready to serve for your digital marketing</h1>

                                <a href="https://www.youtube.com/watch?v=AYaHuZ4BB6Y" class="popup-youtube play-icon-wrap d-flex align-items-center">
                                    <i class="bi-play play-icon"></i>

                                    <small>1:49 Minutes</small>
                                </a>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="overlay"></div>
            </section>

            <section class="about section-padding" id="section_2">
                <div class="container">
                    <div class="row">

                        <div class="col-lg-6 col-12">
                            <h2 class="mb-5">Digital Happiness</h2>
                        </div>

                        <div class="col-lg-4 col-12 ms-lg-auto mb-5 mb-lg-0">
                            <nav>
                                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                    <button class="nav-link active" id="nav-intro-tab" data-bs-toggle="tab" data-bs-target="#nav-intro" type="button" role="tab" aria-controls="nav-intro" aria-selected="true">Introduction</button>

                                    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>

                                    <button class="nav-link" id="nav-faq-tab" data-bs-toggle="tab" data-bs-target="#nav-faq" type="button" role="tab" aria-controls="nav-faq" aria-selected="false">FAQs</button>
                                </div>
                            </nav>
                        </div>

                        <div class="col-12">
                            <div class="tab-content" id="nav-tabContent">
                                <div class="tab-pane fade show active" id="nav-intro" role="tabpanel" aria-labelledby="nav-intro-tab">
                                    <div class="row">
                                        <div class="col-lg-6 col-12 mb-lg-0 mb-4">
                                            <img src="images/webpage-browser-digital-icon-symbols-concept.jpg" class="img-fluid" alt="">
                                        </div>

                                        <div class="col-lg-5 col-12 m-auto">
                                            <h3 class="mb-3">Brand Creation</h3>

                                            <p>We want you to be happy with our Tween Agency services. Our digital agency is ready to serve you to grow your business in a healthy way.</p>

                                            <p>This is Bootstrap 5 HTML template for your website provided by <a rel="nofollow" href="https://www.tooplate.com/" target="_blank">Tooplate</a>. You can download, edit and use this layout for your company website.</p>
                                            
                                            <p>Image credits go to <a rel="nofollow" href="https://freepik.com/" target="_blank">FreePik</a> and <a rel="nofollow" href="https://unsplash.com/" target="_blank">Unsplash</a> for images used in this template. We really appreciate these stock image websites for providing free photos to everyone.</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                                    <div class="row">
                                        <div class="col-lg-5 col-12 m-auto">
                                            <h3 class="mb-3">Marie Smarty, CEO</h3>

                                            <p>Our priority is your happiness working together with us. We guarantee you the best service quality from us. Feel free to talk to us via email, twitter, or linkedin.</p>

                                            <ul class="social-icon mt-lg-5 mt-3">
                                                <li class="me-3"><strong>Where to find?</strong></li>

                                                <li><a href="https://twitter.com/search?q=tooplate" class="social-icon-link bi-twitter"></a></li>

                                                <li><a href="#" class="social-icon-link bi-linkedin"></a></li>

                                                <li><a href="#" class="social-icon-link bi-envelope"></a></li>
                                            </ul>
                                        </div>

                                        <div class="col-lg-6 col-12 mt-lg-0 mt-4">
                                            <img src="images/dream-about-working-corporation-became-true.jpg" class="img-fluid" alt="">
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="nav-faq" role="tabpanel" aria-labelledby="nav-faq-tab">
                                    <div class="row">
                                        <div class="col-lg-6 col-12 mb-lg-0 mb-4">
                                            <img src="images/php-programming-html-coding-cyberspace-concept.jpg" class="img-fluid" alt="">
                                        </div>

                                        <div class="col-lg-5 col-12 m-auto">
                                            <h3 class="mb-3">Frequenlty Asked Questions</h3>

                                            <div class="accordion" id="accordionGeneral">
                                                <div class="accordion-item">
                                                    <h2 class="accordion-header" id="headingOne">
                                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionGeneralOne" aria-expanded="true" aria-controls="accordionGeneralOne">
                                                        What is Tween Agency?
                                                        </button>
                                                    </h2>

                                                    <div id="accordionGeneralOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionGeneral">

                                                        <div class="accordion-body">
                                                            <p class="large-paragraph"><strong>Tween Agency</strong> is free HTML template powered by Bootstrap 5 CSS framework. This means you can use all standard CSS classes provided by Bootstrap version 5 to customize your CSS layout.</p>

                                                            <p class="large-paragraph">You are allowed to use it for your clients. You are not allowed to redistribute this template ZIP file on any other template website. Please <a href="https://www.tooplate.com/contact" target="_blank"><strong>contact Tooplate</strong></a> for more info.</p>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="accordion-item">
                                                    <h2 class="accordion-header" id="headingTwo">
                                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionGeneralTwo" aria-expanded="false" aria-controls="accordionGeneralTwo">
                                                        What are available services?
                                                        </button>
                                                    </h2>

                                                    <div id="accordionGeneralTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionGeneral">

                                                        <div class="accordion-body">
                                                            <p class="large-paragraph">We provide full digital marketing services for all various aspects of your company's web presence and social medias. You have 100% peace of mind for your company by working with us.</p>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="accordion-item">
                                                    <h2 class="accordion-header" id="headingThree">
                                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionGeneralThree" aria-expanded="false" aria-controls="accordionGeneralThree">
                                                        How many successful projects?
                                                        </button>
                                                    </h2>

                                                    <div id="accordionGeneralThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionGeneral">

                                                        <div class="accordion-body">
                                                            <p class="large-paragraph">We have over 280+ successful projects for different companies. There are great experiences of working together with different clients all over the world.</p>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </section>

            <section class="services section-padding" id="section_3">
                <div class="container">
                    <div class="row">

                        <h2 class="mb-5 text-center">Digital Services</h2>

                            <div class="col-lg-4 col-12 d-flex bg-primary p-0">
                                <img src="images/services/undraw_Online_page_re_lhgx.svg" class="img-fluid services-image" alt="">
                            </div>

                            <div class="col-lg-4 col-12 p-0">
                                <div class="services-info custom-icon-left paddingText">
                                
                                    <h4 class="">UI Design</h4>

                                    <p class="mb-4">Lorem Ipsum is simply dummy text of the printing industry</p>

                                    <a class="custom-btn custom-bg-dark btn" href="#">Learn More</a>
                                </div>
                            </div>

                            <div class="col-lg-4 col-12 d-flex bg-warning p-0">
                                <img src="images/services/undraw_online_transactions_02ka.svg" class="img-fluid services-image" alt="">
                            </div>

                            <div class="col-lg-4 col-12 p-0 order-lg-0 order-sm-5">
                          
                                <div class="services-info custom-icon-right paddingText order-lg-0 order-sm-2">
                                
                                    <h4 class="">Marketing</h4>

                                    <p class="mb-4">Lorem Ipsum is simply dummy text of the printing industry</p>

                                    <a class="custom-btn custom-bg-dark btn" href="#">Learn More</a>
                                </div>
                            </div>

                            <div class="col-lg-4 col-12 d-flex bg-success p-0 order-lg-0 order-sm-4">
                                <img src="images/services/undraw_content_team_3epn.svg" class="img-fluid services-image" alt="">
                            </div>

                            <div class="col-lg-4 col-12 p-0">

                                <div class="services-info custom-icon-top paddingText">
                            
                                    <h4 class="">Ecommerce</h4>

                                    <p class="mb-4">Lorem Ipsum is simply dummy text of the printing industry</p>

                                    <a class="custom-btn custom-bg-dark btn" href="#">Learn More</a>
                                </div>
                            </div>

                    </div>
                </div>
            </section>

            <section class="work section-padding" id="section_4">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <h2 class="mb-5 text-center">Selected Projects</h2>
                        </div>

                        <div class="col-lg-4 col-12">
                            <div class="work-thumb mb-4">
                                <div class="work-image-wrap">
                                    <a href="images/work/anthony-espinosa-pYQSM-p_0_c-unsplash.jpg" class="image-popup">
                                        <img src="images/work/anthony-espinosa-pYQSM-p_0_c-unsplash.jpg" class="img-fluid work-image" alt="">
                                    </a>
                                </div>
                                
                                <div class="work-text-info">
                                    <small class="work-tag bg-white shadow-lg">Art Direction</small>

                                    <h4 class="work-title">Simple Burger</h4>
                                </div>
                            </div> 

                            <div class="work-thumb mb-4">
                                <div class="work-image-wrap">
                                    <a href="images/work/samantha-gades-lf2pD--wIUA-unsplash.jpg" class="image-popup">
                                        <img src="images/work/samantha-gades-lf2pD--wIUA-unsplash.jpg" class="img-fluid work-image" alt="">
                                    </a>
                                </div>
                                
                                <div class="work-text-info">
                                    <small class="work-tag bg-white shadow-lg">Design</small>

                                    <h4 class="work-title">Fitness</h4>
                                </div>
                            </div> 
                        </div>

                        <div class="col-lg-4 col-12">
                            <div class="work-thumb mb-4">
                                <div class="work-image-wrap">
                                    <a href="images/work/business-chart-visual-graphics-report-concept.jpg" class="image-popup">
                                        <img src="images/work/business-chart-visual-graphics-report-concept.jpg" class="img-fluid work-image" alt="">
                                    </a>
                                </div>
                                
                                <div class="work-text-info">
                                    <small class="work-tag bg-white shadow-lg">Web Development</small>

                                    <h4 class="work-title">Data Science</h4>
                                </div>
                            </div> 

                            <div class="work-thumb mb-4">
                                <div class="work-image-wrap">
                                    <a href="images/work/tyler-nix-HmVQh_EQJhY-unsplash.jpg" class="image-popup">
                                        <img src="images/work/tyler-nix-HmVQh_EQJhY-unsplash.jpg" class="img-fluid work-image" alt="">
                                    </a>
                                </div>
                                
                                <div class="work-text-info">
                                    <small class="work-tag bg-white shadow-lg">Branding</small>

                                    <small class="work-tag bg-white shadow-lg">Graphic Design</small>

                                    <h4 class="work-title">Health</h4>
                                </div>
                            </div> 
                        </div>

                        <div class="col-lg-4 col-12">
                            <div class="work-thumb mb-4">
                                <div class="work-image-wrap">
                                    <a href="images/work/mos-sukjaroenkraisri-jz8AmJDyhig-unsplash.jpg" class="image-popup">
                                        <img src="images/work/mos-sukjaroenkraisri-jz8AmJDyhig-unsplash.jpg" class="img-fluid work-image" alt="">
                                    </a>
                                </div>
                                
                                <div class="work-text-info">
                                    <small class="work-tag bg-white shadow-lg">Photography</small>

                                    <h4 class="work-title">Portraits</h4>
                                </div>
                            </div> 

                            <div class="work-thumb work-thumb-text">
                                <div class="">
                                    <p class="work-title">If you are interested in working together, Say Hi at <strong><a href="#">hi@company.com</a></strong></p>
                                </div>
                            </div> 
                        </div>

                    </div>
                </div>
            </section>

            <section class="pricing section-padding" id="section_5">
                <div class="container">
                    <div class="row">

                        <div class="col-12">
                            <h2 class="text-white mb-5 text-center">Tween Marketing Plans</h2>
                        </div>

                        <div class="col-lg-6 col-12">
                            <div class="pricing-plan bg-white">
                                <div class="d-flex flex-wrap align-items-center pricing-header">
                                    <i class="pricing-icon bi-person"></i>

                                    <div class="pricing-name">
                                        <h4>Sufficient</h4>
                                    </div>

                                    <div class="pricing-price">
                                        <h4>$4,600</h4>
                                    </div>

                                    <small class="pricing-recommend">Recommended Plan</small>
                                </div>

                                <div class="pricing-body">
                                    <h5 class="mb-3">Managed Features</h5>

                                    <ul class="pricing-list">
                                        <li class="pricing-list-item">Fully Digital</li>
                                        <li class="pricing-list-item">Social Media Managements</li>
                                        <li class="pricing-list-item">Website Optimizations</li>
                                        <li class="pricing-list-item">24/7 Phone Calls and Emails</li>
                                    </ul>

                                    <h5 class="mt-lg-5 mt-4 mb-3">Small to Mid-size Businesses</h5>

                                    <p>Everything you need for your digital marketing stuffs</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6 col-12 mt-lg-0 mt-5">
                            <div class="pricing-plan border-0 bg-white shadow-lg">
                                <div class="d-flex flex-wrap align-items-center pricing-header">
                                    <i class="pricing-icon bi-briefcase"></i>

                                    <div class="pricing-name">
                                        <h4>Complete</h4>
                                    </div>

                                    <div class="pricing-price">
                                        <h4>$8,200</h4>
                                    </div>
                                    
                                    <small class="pricing-recommend">Ecommerce Plan</small>
                                </div>

                                <div class="pricing-body">
                                    <h5 class="mb-3">Fully Featured Work</h5>

                                    <ul class="pricing-list">
                                        <li class="pricing-list-item">Completely Digital</li>
                                        <li class="pricing-list-item">Everything managed online</li>
                                        <li class="pricing-list-item">Full Ecommerce Features</li>
                                        <li class="pricing-list-item">24/7 Instant Video Chats</li>
                                    </ul>

                                    <h5 class="mt-lg-5 mt-4 mb-3">High-end Ecommerce Websites</h5>

                                    <p>Fit for your company and ecommerce related stuffs</p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="overlay dark-overlay"></div>
            </section>

            <section class="section-padding" id="section_6">
                <div class="container">
                    <div class="row">

                        <div class="col-lg-8 col-md-10 col-12 mx-auto">
                            <h2 class="mb-4 text-center">Let's chat</h2>

                            <form class="custom-form" role="form" action="" method="post">
                                <div class="row">
                                    <div class="col-lg-4 col-md-6 col-12 my-2">
                                        <label class="mb-2" for="name">Full Name</label>

                                        <input type="text" name="name" id="name" class="form-control" required>
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-12 my-2">
                                        <label class="mb-2" for="email">Email Address</label>
                                        
                                        <input type="email" name="email" id="email" pattern="[^ @]*@[^ @]*" class="form-control" required>
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-12 my-2">
                                        <label class="mb-2" for="subject">How did you know about us?</label>

                                        <select class="form-select form-control" name="subject" id="subject">
                                            <option selected="">Choose a subject</option>
                                            <option value="web+search">Website Searches</option>
                                            <option value="social+media">Social Media</option>
                                            <option value="others">Others</option>
                                        </select>
                                    </div>

                                    <div class="col-12 my-2">
                                        <label class="mb-2" for="message">Tell us about the project</label>

                                        <textarea class="form-control" rows="5" id="message" name="message"></textarea>
                                    
                                        <button type="submit" class="form-control mt-4" id="submit">Submit</button>
                                    </div>

                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </section>

        </main>

        <footer class="site-footer">
            <div class="container">
                <div class="row">

                    <div class="col-lg-5 col-12 me-auto mb-4">
                        <h5 class="text-white mb-3">Newsletter</h5>

                        <form class="custom-form subscribe-form mt-4" role="form">
                            <div class="row">
                                <div class="col-lg-8 col-md-8 col-7">                                    
                                    <input type="email" name="subscribe-email" id="subscribe-email" pattern="[^ @]*@[^ @]*" class="form-control" placeholder="Your email address" required>
                                </div>

                                <div class="col-lg-4 col-md-4 col-5">                                  
                                    <button type="submit" class="form-control" id="subscribe">Subscribe</button>
                                </div>

                            </div>
                        </form>
                    </div>

                    <div class="col-lg-2 col-12 mx-auto my-lg-0 my-4">
                        <h5 class="text-white mb-3">Services</h5>

                        <ul class="footer-menu">
                            <li class="footer-menu-item"><a href="#" class="footer-menu-link">Digital Marketing</a></li>

                            <li class="footer-menu-item"><a href="#" class="footer-menu-link">Creative Ideas</a></li>

                            <li class="footer-menu-item"><a href="#" class="footer-menu-link">Branding</a></li>

                            <li class="footer-menu-item"><a href="#" class="footer-menu-link">Video Contents</a></li>
                        </ul>
                    </div>

                    <div class="col-lg-2 col-12">

                        <p><a href="mailto:email@company.com" class="footer-link">hainanjinxuan@company.com</a><p>
                    </div>

                    <div class="site-footer-bottom mt-5">
                        <div class="row pt-4">
                            <div class="col-lg-6 col-12">
                                <p class="copyright-text tooplate-link">Copyright © 2024 Hainan Jinxuan Enterprise management Co., LTD
                                <br>Design: 海南金轩企业管理有限公司</p>
                            </div>

                            <div class="col-lg-3 col-12 ms-auto">
                                <ul class="social-icon">
                                    <li><a href="#" class="social-icon-link bi-facebook"></a></li>

                                    <li><a href="https://twitter.com/search?q=tooplate" class="social-icon-link bi-twitter"></a></li>

                                    <li><a href="#" class="social-icon-link bi-instagram"></a></li>

                                    <li><a href="#" class="social-icon-link bi-linkedin"></a></li>

                                    <li><a href="#" class="social-icon-link bi-youtube"></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </footer>

        <!-- JAVASCRIPT FILES -->
        <script src="js/jquery.min.js"></script>
        <script src="js/popper.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery.backstretch.min.js"></script>
        <script src="js/jquery.magnific-popup.min.js"></script>
        <script src="js/magnific-popup-options.js"></script>
        <script src="js/click-scroll.js"></script>
        <script src="js/custom.js"></script>
    </body>
</html>
